<template>
  <div class="mall-wrapper">
    <div class="no-mall" v-if="!mallList">
      <van-icon name="shop" />
      <p>您还没有收藏过店铺</p>
    </div>
    <div class="mall-collection" v-else>
      <div class="mall-list">
        <div class="title">店铺收藏</div>
        <div class="mall-item" v-for="item in mallList">
          <div class="mall-info">
            <img :src="item.logo" alt="">
            <div class="mall-name">
              <div class="name-wrapper">
                <div class="name">{{item.mall_name}}</div>
              </div>
              <div class="sales">
                <span>{{item.sales_tip}}</span>
                <span> | </span>
                <span>{{item.goods_num_tip}}</span>
              </div>
            </div>
            <div class="button">
              <div class="more">
                <i class="iconfont icon-gengduo1"></i>
              </div>
              <van-button type="danger" size="small">进店逛逛</van-button>
            </div>
          </div>
          <div class="goods-list-wrapper">
            <scroll class="goods-scroll" :scrollX="true" :bounce="true">
              <ul class="goods-list">
                <li class="goods-item" v-for="goods in item.goods_list">
                  <img :src="goods.thumb_url" alt="">
                  <div class="goods-info">
                    <div class="price">￥{{goods.price/100}}</div>
                  </div>
                </li>
              </ul>
            </scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import scroll from "../../../common/scroll";
import axios from "axios";
import { mallCollection } from "../../../api/getDatas";
export default {
  components: {
    scroll
  },
  data() {
    return {
      mallList: null
    };
  },
  methods: {
    initData() {
      mallCollection().then(res => {
        this.mallList = res.data.data.list;
      });
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.no-mall {
  padding-top: 1.51rem;
  //   height: 4.21rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  p {
    color: #58595b;
    font-size: 0.16rem;
  }
  .van-icon-shop {
    color: #ccc;
    margin-bottom: 0.28rem;
    font-size: 0.7rem;
  }
}
.mall-collection {
  .mall-list {
    .title {
      padding: 0.15rem 0.12rem 0;
      width: 100%;
      line-height: 1;
      text-align: left;
      vertical-align: text-bottom;
      color: #151516;
      font-size: 0.16rem;
      background-color: #fff;
    }
    .mall-item {
      background-color: #fff;
      border-bottom: 1px solid #e9e9e9;
      .goods-list-wrapper {
        .goods-scroll {
          width: 100%;
          overflow: hidden;
        }
        .goods-list {
          display: inline-block;
          white-space: nowrap;
          .goods-item {
            position: relative;
            display: inline-block;
            margin: 0 0 0.2rem 0.12rem;
            width: 1rem;
            height: 1rem;
            img {
              display: inline-block;
              width: 1rem;
              height: 1rem;
            }
            .goods-info {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: row;
              position: absolute;
              bottom: 0.06rem;
              height: 0.18rem;
              width: 100%;
              .price {
                height: 0.18rem;
                line-height: 0.18rem;
                padding: 0 0.05rem;
                border-radius: 0.09rem;
                background-color: rgba(0, 0, 0, 0.5);
                color: #fff;
                font-size: 0.13rem;
              }
            }
          }
        }
      }
      .mall-info {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        top: 0.01rem;
        padding: 0 0.12rem;
        width: 100%;
        height: 0.69rem;
        img {
          display: inline-block;
          height: 0.42rem;
          width: 0.42rem;
          border: 1px solid #ededed;
          border-radius: 0.02rem;
        }
        .mall-name {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-direction: column;
          margin-right: 0.01rem;
          width: 1.7rem;
          text-align: left;
          .name-wrapper {
            position: relative;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: row;
            top: -0.02rem;
            height: 0.19rem;
            line-height: 0.19rem;
            .name {
              max-width: 1.3rem;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              color: #181818;
              font-size: 0.15rem;
            }
          }
          .sales {
            margin-top: 0.06rem;
            max-width: 100%;
            height: 0.12rem;
            line-height: 0.12rem;
            color: #9c9c9c;
            font-size: 0.12rem;
          }
        }
        .button {
          display: flex;
          margin-left: 0.1rem;
          .more {
            padding-right: 0.02rem;
            width: 0.38rem;
            height: 0.3rem;
            line-height: 0.3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            i {
              color: #d0d0d0;
            }
          }
        }
      }
    }
  }
}
</style>

